<template>
  <div class="student-list">
    <div class="header-container">
      <h2>学生信息列表</h2>
    </div>
    <div class="table-container">
      <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>联系方式</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student) in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.sex }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.phone }}</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>


<script>
// 1. 导入 axios 库
import axios from 'axios';

export default {
  name: 'StudentList',
  data() {
    return {
      // 核心数据：只需要一个 students 数组来存放从后端获取的数据
      students: []
    }
  },
  // 'created' 生命周期钩子：组件一被创建就去获取数据
  created() {
    this.fetchStudentData();
  },
  methods: {
    async fetchStudentData() {
      try{
        const response = await axios.get('http://localhost:8080/students/getAllStudents');
        if (response.status !== 200) {
          throw new Error('获取学生数据失败');
        }
        this.students = response.data.data;
      }catch(error) {
      console.error("获取学生数据时出错!", error);
      alert("学生数据加载失败！请检查网络连接。");
    }
  }
}
}
</script>


<!-- 重点看下面修改过的 style 部分 -->
<style scoped>
.student-list {
  width: 100%;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  transition: all 0.3s ease;
}

/* 设置标题容器 */
.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  text-align: center;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #5e72e4, #2c7be5);
  border-radius: 3px;
}

.table-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

table {
  width: 95%;
  max-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

th, td {
  padding: 15px 18px;
  text-align: center;
}

th {
  background: linear-gradient(to right, #2c7be5, #5e72e4);
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  position: relative;
}

th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

td {
  border-bottom: 1px solid #edf2f7;
  font-size: 15px;
  color: #4a5568;
  transition: all 0.2s ease;
}

/* 设置表格主体行的样式 */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* 设置鼠标悬停在行上的效果 */
tbody tr:hover {
  background-color: #edf2f7;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

tbody tr:hover td {
  color: #2c7be5;
}

/* 移除最后一行多余的底部边框 */
tbody tr:last-child td {
  border-bottom: none;
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .student-list {
    max-width: 95vw;
    width: 95vw;
    padding: 15px;
  }
  
  th, td {
    padding: 12px 10px;
    font-size: 14px;
  }
  
  h2 {
    font-size: 20px;
  }
}
</style>